<template>
  <div class="my">
    <div class="otop">
      <p class="mytype">我的订单</p>
      <router-link :to="{ path: '/home/search', query: { index: 1 } }">
        <span class="iconfont">&#xe651;</span>
      </router-link>
    </div>
    <div v-if="!isflase" class="no">
      <router-link :to="{ path: '/home/search', query: { index: 1 } }">你还没有订单，快去购买吧 >
      </router-link>
      </div>
    <div v-if="isflase" class="myorder">
      <div class="zjbox">
        <div class="zuijin">
          <div class="top">
            <p>最近常买</p>
            <router-link :to="{ path: '/home/type', query: { type: 'add' } }">
              <span class="iconfont">查看更多商家&#xe775;</span>
            </router-link>
          </div>
          <div class="oimg">
            <div class="name" v-for="item in dingdan">
              <router-link
                :to="{
                  path: '/business/commodity',
                  query: { id: item.shangjia.id, page: 'sp' },
                }"
              >
                <img :src="item.shangjia.src" alt="" />
                <p>{{ item.shangjia.name }}</p>
              </router-link>
              <span>{{ item.shangjia.zhuangtai }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="otab">
        <ul>
          <li class="active">全部订单</li>
          <li>待评价</li>
          <li>退款</li>
        </ul>
      </div>
      <div class="odingdan">
        <div class="box" v-for="(item, index) in dingdan">
          <div class="dtop">
            <img :src="item.shangjia.src" alt="" />
            <div class="tname">
              <router-link
                :to="{
                  path: '/business/commodity',
                  query: { id: item.shangjia.id, page: 'sp' },
                }"
              >
                <span class="iconfont">{{ item.shangjia.name }}&#xe775;</span>
              </router-link>
              <span>{{ item.zhuangtai }}</span>
              <div class="biaoqian">
                <span>起送价￥{{ item.shangjia.qs }}</span>
                <span>{{ item.shangjia.ps }}</span>
              </div>
            </div>
          </div>
          <div class="dimg">
            <div class="iimg" v-for="id in item.shangpinid">
              <img :src="item.shangjia.shop[id - 1].img" alt="" />
              <p>{{ item.shangjia.shop[id - 1].name }}</p>
            </div>
            <div class="jine">
              <p>￥{{ item.jiage }}</p>
              <p>共{{ item.shangpinid.length }}件</p>
            </div>
          </div>
          <div class="sonda">
            <span @click="clcik(index)">{{ item.quxiao }}</span>
            <span @click="click2(index)">{{ item.queren }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.my {
  width: 100%;
  overflow: hidden;
  .otop {
    top: 0;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 50px;
    background-color: rgb(22, 187, 250);
    display: flex;
    p {
      font-size: 18px;
      font-weight: bold;
      color: white;
      width: 100%;
      line-height: 50px;
      text-align: center;
      margin: 0;
      padding: 0;
    }
    span {
      font-size: 22px;
      font-weight: bolder;
      position: absolute;
      color: white;
      right: 12px;
      top: 15px;
    }
  }
  .no {
    text-align: center;
    margin-top: 100px;
    font-size: 20px;
    font-weight: bolder;
    a{
          color: rgb(247, 60, 60);
    }
  }
  .myorder {
    margin-top: 50px;
    padding-bottom: 50px;
    background-color: rgb(240, 240, 240);
    .zjbox {
      height: 180px;
      padding: 10px;
      background-image: linear-gradient(rgb(22, 187, 250), white);
      .zuijin {
        background-color: white;
        height: 165px;
        border-radius: 20px;
        .top {
          display: flex;
          position: relative;
          p {
            line-height: 30px;
            margin: 0;
            padding: 0;
            font-size: 16px;
            font-weight: bold;
            padding: 10px 0 5px 12px;
          }
          span {
            line-height: 45px;
            position: absolute;
            font-size: 14px;
            right: 10px;
          }
        }
        .oimg {
          display: flex;
          overflow: hidden;
          .name {
            width: 15%;
            flex-shrink: 0;
            box-sizing: border-box;
            padding-top: 0;
            background-color: rgb(240, 240, 240);
            margin: 3%;
            margin-top: 0;
            padding-bottom: 25px;
            img {
              width: 100%;
              height: 100%;
              padding-bottom: 0;
              text-align: center;
            }
            p {
              text-align: center;
              padding: 0;
              margin: 0;
              font-size: 12px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .otab {
      margin: 10px;
      ul {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
        li {
          font-weight: bold;
          font-size: 15px;
          padding-bottom: 5px;
          text-align: center;
        }
        .active {
          border-bottom: 3px solid rgb(22, 187, 250);
        }
      }
    }
    .odingdan {
      margin: 10px;
      overflow: hidden;
      .box {
        margin-bottom: 10px;
        background-color: white;
        .dtop {
          display: flex;
          img {
            width: 50px;
            height: 50px;
            padding: 15px;
          }
          .tname {
            position: relative;
            width: 100%;
            span {
              font-weight: bold;
              margin: 5px;
            }
            > span:nth-child(2) {
              font-size: 14px;
              position: absolute;
              right: 20px;
              top: 5px;
            }
            .biaoqian {
              span {
                padding: 3px;
                border-radius: 20px;
                border: 1px solid red;
                font-weight: 400;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
    .dimg {
      display: flex;
      position: relative;
      .iimg {
        width: 25%;
        height: 100px;
        box-sizing: border-box;
        padding-left: 15px;
        img {
          border-radius: 7px;
          width: 100%;
          height: 60px;
        }
        p {
          padding: 0;
          margin: 0;
          font-size: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .jine {
        position: absolute;
        width: 25%;
        height: 100px;
        right: 0;
        background-color: white;
        p {
          font-size: 18px;
          font-weight: bold;
          text-align: center;
          margin: 0;
          margin-top: 20px;
        }
        p:nth-child(2) {
          color: rgb(24, 24, 24);
          font-size: 12px;
          margin-top: 0px;
        }
      }
    }
    .sonda {
      margin-left: 50%;
      padding-bottom: 20px;
      span {
        border: 1px solid rgb(0, 0, 0);
        font-size: 12px;
        font-weight: bold;
        padding: 5px;
        border-radius: 14px;
        margin-right: 10px;
      }
      span:nth-child(2) {
        background-color: rgb(237, 241, 0);
      }
    }
  }
}
</style>
<script>
export default {
  name: "order",
  data() {
    return {
      dingdan: [],
      isflase: false,
    };
  },
  methods: {
    clcik(i) {
      if (this.dingdan[i].zhuangtai == "已完成") {
        return;
      } else {
        this.dingdan[i].zhuangtai = "已取消";
        this.dingdan[i].queren = "订单取消";
        this.dingdan[i].quxiao = "订单取消";
      }
    },
    click2(i) {
      if (this.dingdan[i].zhuangtai == "已取消") {
        return;
      } else {
        this.dingdan[i].zhuangtai = "已完成";
        this.dingdan[i].queren = "评论得达源豆";
        this.dingdan[i].quxiao = "订单完成";
      }
    },
  },
  // 获取订单
  mounted() {
    let _this = this;
    for (let i = 0; i < 99; i++) {
      let name = "dingdan" + i;
      let dingdan = localStorage.getItem(name);
      if (dingdan == null) {
        break;
      } else {
        dingdan = JSON.parse(dingdan);
        _this.dingdan.unshift(dingdan);
      }
    }
    if (_this.dingdan.length > 0) {
      _this.isflase = true;
    }
  },
};
</script>
<style lang="scss" scoped>
</style>